<template>
  <el-dialog title="选择" :visible.sync="dialogVisible" width="70%">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
      <el-form-item label="单据号" prop="code">
        <el-input
          v-model="queryParams.code"
          placeholder="请输入单据号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="仓库" prop="scName">
        <el-select v-model="queryParams.scId" placeholder="全部" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in ck" :key="index" :label="item.name"
                     :value="item.id" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户" prop="customerName">
        <el-select v-model="queryParams.customerId" placeholder="全部" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in customer" :key="index" :label="item.name"
                     :value="item.id" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作人" prop="createBy">
        <el-select v-model="queryParams.createBy" placeholder="全部" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in user" :key="index" :label="item.userName"
                     :value="item.userId" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作时间" >
        <el-date-picker clearable
                        v-model="queryParams.createMinTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        :style="{width: '30%'}">
        </el-date-picker>
        至
        <el-date-picker clearable
                        v-model="queryParams.createMaxTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        :style="{width: '30%'}">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="orderList" @row-click="handleRowClick">
      <!--      <el-table-column label="ID" align="center" prop="id" />-->
      <el-table-column label="销售单号" align="left" prop="code" width="180"/>
      <el-table-column label="仓库名称" align="left" prop="scName" />
      <el-table-column label="客户名称" align="left" prop="customerName" />
      <el-table-column label="销售数量" align="left" prop="totalNum" />
      <el-table-column label="销售金额" align="left" prop="totalAmount" >
        <template slot-scope="scope">
          <span>{{ Number(scope.row.totalAmount).toLocaleString() }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="left" prop="status" >
        <template slot-scope="scope">
          <span>{{ scope.row.status == 0 ? "待审核" : scope.row.status == 3 ? "审核成功" : "审核拒绝"}}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="left" prop="description" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="fetchOrders"
    />
  </el-dialog>
</template>

<script>
import { customer, center, listOrder} from "@/api/system/order";
import { listUser } from "@/api/system/user";
import {parseTime} from "../../../utils/ruoyi";

export default {
  data() {
    return {
      dialogVisible: false,
      orderList: [],
      total: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        scId: null,
        customerId: null,
        createBy: null,
        createTime: null,
        createMinTime: null,
        createMaxTime: null,
      },
      // 仓库下拉框
      ck: [],
      // 用户(审核人、操作人、销售员)下拉框
      user: [],
      // 客户下拉框
      customer: [],
    };
  },
  methods: {
    parseTime,
    show() {
      this.dialogVisible = true;
      this.fetchOrders();
    },
    fetchOrders() {
      customer(this.customer).then(response => {
        this.customer = response.rows;
      });
      center({categoryType:1}).then(response => {
        this.ck = response.rows;
      });
      listUser(this.user).then(response => {
        this.user = response.rows;
      });
      this.queryParams.flag = 1;
      listOrder(this.queryParams).then(resp => {
        this.total = resp.total;
        this.orderList = resp.rows;
        console.log(this.orderList);
      });
    },
    handleRowClick(row) {
      row.total = this.total;
      this.$emit('order-selected', row);
      this.dialogVisible = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.fetchOrders();
    },
  },
};
</script>
